$(function () {
  var currentPage = 1;//记录当前页
  var pageSize = 5;//一页5条
  var total=null;

  //1- 首页数据渲染
  //2- 取数据+模板引擎
  //1- ajax去后台获取用户数据
  //2- 用户模板引擎渲染到页面中
  function render() {
    $.ajax({
      url: '/user/queryUser',
      type: 'GET',
      data: {
        pageSize: pageSize,
        page: currentPage,
      },
      dataType: 'json',
      success: function (res) {
        console.log(res)
        //渲染
        $('tbody').html(template('tmp', res));
        //res.total 数据库数据真实的总数
        setPage(res.total);
      }
    })
  }
  render();

  //2- 禁用启用功能
  //1- 点击 禁用/启用按钮,弹出模态框,获取当前数据的id 获取要进行操作
  //2- 用户点击确定操作按钮,向后台发送请求,根据id对用户进行禁用获取启用
  //3- 后台操作完成,前端重新渲染,看到操作结果

  var id = null;
  var isDelete = null;
  $('tbody').on('click', '.btn-exec', function () {
    //获取当前数据的id,获取要进行操作
    // id=$(this).parent().attr('data-id');
    //data() jquery 提供 用于获取 dete-开头的自定义属性 data('name')
    id = $(this).parent().data('id');
    //获取要进行操作 1 启用 0禁用
    isDelete = $(this).hasClass('btn-success') ? 1 : 0;
    console.log(id, isDelete);
  })

  //2- 用户点击确定操作按钮,向后台发送请求,根据id对用户进行禁用获取启用
  //3- 后台操作完成,前端重新渲染,看到操作结果
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'POST',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete,
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        render()//重新渲染
        $('.modal-user').modal('hide');//隐藏模态框
      },
    })
  })

  //3-分页功能
  //1-分页按钮的个数，由后台数据库数据的总数决定！ 生成分页之前要先获取数据库数据的总数
  //2-根据总数生成分页按钮，实现点击切换页面功能
  //     页面=math.ceil(数据总数/每页条数)
  //     使用插件 生成分页按钮 切换页面
  //     分装一个生成生成分页的方法 
  //      total表示数据库数据的总数
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,// 默认高亮的分页按钮 
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮对应的页码
        console.log('page:', page);
        // 改变当前页取值
        currentPage = page;
        // 重新渲染数据;
        render();
      }
    });
  }
  // setPage(total);
})